<template>
  <div class="pt">
    <el-input
      class="short-form"
      placeholder="请选择所属班组"
      v-model="belongTeam.value"
      icon="caret-bottom"
      :size="size"
      readonly="readonly"
      :value="belongTeam.id"
      @click.native="isShow=!isShow">
    </el-input>
    <el-tree
      ref="tree"
      v-show="isShow"
      :class="['box-tree tl',{'pos-ab':position}]"
      node-key="id"
      empty-text="暂无数据"
      :data="belongTeam.regions"
      :props="belongTeam.props"
      :load="loadNode"
      :expand-on-click-node="false"
      lazy
      @node-click="handleNodeClick">
    </el-tree>
  </div>

</template>

<script>
  import {getDepartZtree } from '../api/api'
export default {
  name: 'belongTeam',
  data(){
    return {
      isShow:false,
      belongTeam:{
        id:'',
        value:'',
        regions: [],
        props: {
          label: 'name',
          children: 'id',
        }
      },
    }
  },
  props:{
    size:{
      type: String,
      default: ''
    },
    position:{
      type: Boolean,
      default: true
    },
    isCallbackObj:{
      type: Boolean,
      default: false
    },
    val:{
      type: String,
      default: ''
    },
    valT:{
      type: String,
      default: ''
    },
  },
  watch: {
    // val(val,oldval) {
    //   console.log(val,oldval)
    //   if(val!=oldval){
    //       this.$nextTick(()=>{
    //         // console.log(this.$refs.tree.getCheckedNodes()[0].name)
    //         this.belongTeam.id =this.val;
    //         this.belongTeam.value =this.$refs.tree.getCheckedNodes()[0].name;
    //         let emit=this.isCallbackObj?{'id':this.belongTeam.id,'name':this.belongTeam.value}:this.belongTeam.id
    //         this.$emit("changes",emit);
    //       })
    //   }
    // }
  },
  mounted() {
  },
  methods: {
    //加载班组数据
    loadNode(node, resolve) {
      if (node.level === 0) {
        getDepartZtree().then(res => {
          let teamData = res.obj;
          if(this.val){
            this.$refs.tree.setCheckedKeys([this.val]);
            this.$nextTick(()=>{
              // console.log(this.$refs.tree.getCheckedNodes()[0].name)
              this.belongTeam.id =this.val;
              console.log(this.$refs.tree.getCheckedNodes())
              let treeT=this.$refs.tree.getCheckedNodes()
              if(treeT.length){
                this.belongTeam.value =this.$refs.tree.getCheckedNodes()[0].name;
              }else{
                this.belongTeam.value=this.valT
              }
              let emit=this.isCallbackObj?{'id':this.belongTeam.id,'name':this.belongTeam.value}:this.belongTeam.id
              this.$emit("changes",emit);
            })
            
          }else{
            this.belongTeam.id = teamData[0].id;
            this.belongTeam.value = teamData[0].name;
            let emit=this.isCallbackObj?{'id':teamData[0].id,'name':teamData[0].name}:teamData[0].id
            this.$emit("changes",emit);
            // this.$emit("changes",teamData[0].id);
          }
          return resolve(teamData);
        });
      }else{
        var hasChild;
        if (node.data.isParent) {
          hasChild = true;
        } else{
          hasChild = false;
        }
      }
      var children;
      if (hasChild) {
        getDepartZtree({id:node.data.id}).then(res => {
          children = res.obj;
          resolve(children);
        });
      } else {
        children = [];
        resolve(children);
      }
    },
    //班组选择
    handleNodeClick(data,node){
      console.log(data)
      this.belongTeam.id = data.id;
      let emit=this.isCallbackObj?{'id':data.id,'name':data.name}:data.id
      this.$emit("changes",emit);
      this.belongTeam.value = data.name;
      this.isShow=!this.isShow;
    },
  }
}
</script>

<style lang="scss">
  .pos-ab{position: absolute;}
  .box-tree{position: absolute;width:100%;height:auto;z-index:99;}
</style>
